<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> SmartAdmin </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Caution! DO NOT change the order -->
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-production-plugins.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-production.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-skins.min.css">

		<!-- SmartAdmin RTL Support -->
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/smartadmin-rtl.min.css"> 

		<link href="${base}/ui/css/admin/style.css" rel="stylesheet" type="text/css" />

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
		<link rel="stylesheet" type="text/css" media="screen" href="${base}/css/demo.min.css">

		<!-- FAVICONS -->
		<link rel="shortcut icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="${base}/img/favicon/favicon.ico" type="image/x-icon">

		<!-- GOOGLE FONT -->
		<link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:400italic,700italic,300,400,700">

		<!-- Specifying a Webpage Icon for Web Clip 
			 Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
		<link rel="apple-touch-icon" href="${base}/img/splash/sptouch-icon-iphone.png">
		<link rel="apple-touch-icon" sizes="76x76" href="${base}/img/splash/touch-icon-ipad.png">
		<link rel="apple-touch-icon" sizes="120x120" href="${base}/img/splash/touch-icon-iphone-retina.png">
		<link rel="apple-touch-icon" sizes="152x152" href="${base}/img/splash/touch-icon-ipad-retina.png">
		
		<!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<!-- Startup image for web apps -->
		<link rel="apple-touch-startup-image" href="${base}/img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
		<link rel="apple-touch-startup-image" href="${base}/img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
		<link rel="apple-touch-startup-image" href="${base}/img/splash/iphone.png" media="screen and (max-device-width: 320px)">

	</head>
	
	<!--

	TABLE OF CONTENTS.
	
	Use search to find needed section.
	
	===================================================================
	
	|  01. #CSS Links                |  all CSS links and file paths  |
	|  02. #FAVICONS                 |  Favicon links and file paths  |
	|  03. #GOOGLE FONT              |  Google font link              |
	|  04. #APP SCREEN / ICONS       |  app icons, screen backdrops   |
	|  05. #BODY                     |  body tag                      |
	|  06. #HEADER                   |  header tag                    |
	|  07. #PROJECTS                 |  project lists                 |
	|  08. #TOGGLE LAYOUT BUTTONS    |  layout buttons and actions    |
	|  09. #MOBILE                   |  mobile view dropdown          |
	|  10. #SEARCH                   |  search field                  |
	|  11. #NAVIGATION               |  left panel & navigation       |
	|  12. #RIGHT PANEL              |  right panel userlist          |
	|  13. #MAIN PANEL               |  main panel                    |
	|  14. #MAIN CONTENT             |  content holder                |
	|  15. #PAGE FOOTER              |  page footer                   |
	|  16. #SHORTCUT AREA            |  dropdown shortcuts area       |
	|  17. #PLUGINS                  |  all scripts and plugins       |
	
	===================================================================
	
	-->
	
	<!-- #BODY -->
	<!-- Possible Classes

		* 'smart-style-{SKIN#}'
		* 'smart-rtl'         - Switch theme mode to RTL
		* 'menu-on-top'       - Switch to top navigation (no DOM change required)
		* 'no-menu'			  - Hides the menu completely
		* 'hidden-menu'       - Hides the main menu but still accessable by hovering over left edge
		* 'fixed-header'      - Fixes the header
		* 'fixed-navigation'  - Fixes the main menu
		* 'fixed-ribbon'      - Fixes breadcrumb
		* 'fixed-page-footer' - Fixes footer
		* 'container'         - boxed layout mode (non-responsive: will not work with fixed-navigation & fixed-ribbon)
	-->
	<body class="">

		<!-- MAIN PANEL -->
		<div>
			<!-- MAIN CONTENT -->
			<div id="content">
				<!-- widget grid -->
				<section id="widget-grid" class="">
				
					<!-- row -->
					<div class="row">
				
						<!-- NEW WIDGET START -->
						<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

							<!-- Widget ID (each widget will need unique ID)-->
							<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-3" data-widget-editbutton="false">
								<!-- widget options:
								usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
				
								data-widget-colorbutton="false"
								data-widget-editbutton="false"
								data-widget-togglebutton="false"
								data-widget-deletebutton="false"
								data-widget-fullscreenbutton="false"
								data-widget-custombutton="false"
								data-widget-collapsed="true"
								data-widget-sortable="false"
				
								-->
								<header>
									<span class="widget-icon"> <i class="fa fa-table"></i> </span>
									<h2>Export to PDF / Excel</h2>
				
								</header>
				
								<!-- widget div-->
								<div>
				
									<!-- widget edit box -->
									<div class="jarviswidget-editbox">
										<!-- This area used as dropdown edit box -->
				
									</div>
									<!-- end widget edit box -->
				
									<!-- widget content -->
									<div class="widget-body no-padding">
				
										<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
											<thead>
												<tr>
													<th data-hide="phone">ID</th>
													<th data-class="expand">Name</th>
													<th>Phone</th>
													<th data-hide="phone">Company</th>
													<th data-hide="phone,tablet">Zip</th>
													<th data-hide="phone,tablet">City</th>
													<th data-hide="phone,tablet">Date</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>1</td>
													<td>Jennifer</td>
													<td>1-342-463-8341</td>
													<td>Et Rutrum Non Associates</td>
													<td>35728</td>
													<td>Fogo</td>
													<td>03/04/14</td>
												</tr>												
												<tr>
													<td>99</td>
													<td>Liberty</td>
													<td>1-841-489-1665</td>
													<td>Sed Sem Limited</td>
													<td>27504-649</td>
													<td>Olivola</td>
													<td>05/24/14</td>
												</tr>
												<tr>
													<td>100</td>
													<td>Cathleen</td>
													<td>1-883-567-6065</td>
													<td>Eu Corporation</td>
													<td>4286</td>
													<td>Rotheux-Rimi?re</td>
													<td>07/16/13</td>
												</tr>
											</tbody>
										</table>
				
									</div>
									<!-- end widget content -->
				
								</div>
								<!-- end widget div -->
				
							</div>
							<!-- end widget -->
							<!-- table star -->
								<div class="row col-lg-12">
									<div class="wrapper wrapper-content animated fadeInUp">
										<div class="ibox">
											<div class="ibox-title"><h5>所有项目</h5>
							                   <div class="ibox-tools rboor">
							                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-plus"></i> 创建新项目</a>
							                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-pencil2"></i> 编辑</a>
							                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-remove4"></i> 删除</a>
							                        <a href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-spell-check"></i> 批量审核</a>
							                        <button id="tb-refresh" href="projects.html" class="btn btn-primary btn-xs p310"><i class="im-spinner10 fa-spin"></i> 刷新</button>
							                   </div>
							                </div>
							                
							                <div class="ibox-content">
							                	<!-- search star -->
							                	<div class="form-horizontal clearfix">                		
								                     <div class="col-lg-4 col-sm-3 pl0">
									                     <div class="form-group">
									                           <div class="col-lg-8 col-sm-7">
									                                 <select class="input-sm form-control input-s-sm inline">
							                                            <option value="0">请选择</option>
							                                            <option value="1">冻结</option>
							                                            <option value="2">开放</option>
							                                            <option value="3">审核</option>
							                                        </select>
									                           </div>
									                     </div>
								                     </div>
								                     <div class="col-lg-4 col-sm-5">
									                     <div class="form-group">
									                           <label class="col-lg-3  col-sm-3 control-label">日期：</label>
									                           <div class="col-lg-8 col-sm-8 input-group date">
									                           		<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									                                 <input type="email" placeholder="2014-11-17" class="input-sm form-control">
									                                 <span class="input-group-addon">到</span>
									                                 <input type="text" class="input-sm form-control" name="end" value="" placeholder="2014-11-17">
									                           </div>
									                     </div>
								                     </div>
								                     <div class="col-lg-4 col-sm-4">
									                	<div class="form-group">
									                           <div class="col-lg-12 col-sm-12 input-group">
									                                 <input type="email" placeholder="请输入关键字" class="input-sm form-control">
									                                 <span class="input-group-btn">
							                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
									                           </div>
									                     </div>
								                     </div>
							                     </div>
							                     <!-- search end -->
							                	<table id="example" class="table table-striped table-bordered table-hover dataTables-example dataTable" cellspacing="0" width="100%">
							                		<thead>
														<tr>
															<th class="tn"><input id="checkall" name="" type="checkbox" value=""></th>
															<th>姓名</th>
															<th>地址</th>
															<th>详细地址</th>
															<th>年龄</th>
															<th>日期</th>
															<th>工资</th>
														</tr>
													</thead>
													<tbody>
														<tr>
															<td><input id="checkall" name="" type="checkbox" value=""></td>
															<td>Tiger Nixon</td>
															<td>System Architect</td>
															<td>Edinburgh</td>
															<td>61</td>
															<td>2011/04/25</td>
															<td>$320,800</td>
														</tr>
														<tr>
															<td><input id="checkall" name="" type="checkbox" value=""></td>
															<td>Garrett Winters</td>
															<td>Accountant</td>
															<td>Tokyo</td>
															<td>63</td>
															<td>2011/07/25</td>
															<td>$170,750</td>
														</tr>														
													  </tbody>
							                	  </table>
							                </div>
							                
										</div>
									</div>
								</div>
								<!-- table end -->
						</article>
						<!-- WIDGET END -->
				
					</div>
				
					<!-- end row -->
				
					<!-- end row -->
				
				</section>
				<!-- end widget grid -->

			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="${base}/js/plugin/pace/pace.min.js"></script>

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		<script src="${base}/js/libs/jquery-2.1.1.min.js"></script>
		<script>
			if (!window.jQuery) {
				document.write('<script src="${base}/js/libs/jquery-2.1.1.min.js"><\/script>');
			}
		</script>

		<script src="${base}/js/libs/jquery-ui-1.10.3.min.js"></script>
		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="${base}/js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- IMPORTANT: APP CONFIG -->
		<script src="${base}/js/app.config.js"></script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events-->
		<script src="${base}/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> 

		<!-- BOOTSTRAP JS -->
		<script src="${base}/js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="${base}/js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="${base}/js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="${base}/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="${base}/js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="${base}/js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="${base}/js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="${base}/js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="${base}/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="${base}/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices -->
		<script src="${base}/js/plugin/fastclick/fastclick.min.js"></script>

		<!--[if IE 8]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		
		<!-- MAIN APP JS FILE -->
		<script src="${base}/js/app.min.js"></script>

		<!-- ENHANCEMENT PLUGINS : NOT A REQUIREMENT -->
		<!-- Voice command : plugin -->
		<script src="${base}/js/speech/voicecommand.min.js"></script>

		<!-- SmartChat UI : plugin -->
		<script src="${base}/js/smart-chat-ui/smart.chat.ui.min.js"></script>
		<script src="js/smart-chat-ui/smart.chat.manager.min.js"></script>

		<!-- PAGE RELATED PLUGIN(S) -->
		<script src="${base}/js/plugin/datatables/jquery.dataTables.min.js"></script>
		<script src="${base}/js/plugin/datatables/dataTables.colVis.min.js"></script>
		<script src="${base}/js/plugin/datatables/dataTables.tableTools.min.js"></script>
		<script src="${base}/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
		<script src="${base}/js/plugin/datatable-responsive/datatables.responsive.min.js"></script>
		<script type="text/javascript" src="${base}/ui/js/admin/colResizable-1.5.min.js"></script>

		<script type="text/javascript">
		
		// DO NOT REMOVE : GLOBAL FUNCTIONS!
		
		$(document).ready(function() {
			
			pageSetUp();
			
			/* // DOM Position key index //
		
			l - Length changing (dropdown)
			f - Filtering input (search)
			t - The Table! (datatable)
			i - Information (records)
			p - Pagination (paging)
			r - pRocessing 
			< and > - div elements
			<"#id" and > - div with an id
			<"class" and > - div with a class
			<"#id.class" and > - div with an id and class
			
			Also see: http://legacy.datatables.net/usage/features
			*/	
	
			/* BASIC ;*/
				var responsiveHelper_dt_basic = undefined;
				var responsiveHelper_datatable_fixed_column = undefined;
				var responsiveHelper_datatable_col_reorder = undefined;
				var responsiveHelper_datatable_tabletools = undefined;
				
				var breakpointDefinition = {
					tablet : 1024,
					phone : 480
				};
	
				$('#dt_basic').dataTable({
					"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>"+
						"t"+
						"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
					"autoWidth" : true,
					"preDrawCallback" : function() {
						// Initialize the responsive datatables helper once.
						if (!responsiveHelper_dt_basic) {
							responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
						}
					},
					"rowCallback" : function(nRow) {
						responsiveHelper_dt_basic.createExpandIcon(nRow);
					},
					"drawCallback" : function(oSettings) {
						responsiveHelper_dt_basic.respond();
					}
				});
	
			/* END BASIC */
			
	
			/* TABLETOOLS */
			$('#datatable_tabletools').dataTable({
				
				// Tabletools options: 
				//   https://datatables.net/extensions/tabletools/button_options
				"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'T>r>"+
						"t"+
						"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
		        "oTableTools": {
		        	 "aButtons": [
		             "copy",
		             "csv",
		             "xls",
		                {
		                    "sExtends": "pdf",
		                    "sTitle": "SmartAdmin_PDF",
		                    "sPdfMessage": "SmartAdmin PDF Export",
		                    "sPdfSize": "letter"
		                },
		             	{
	                    	"sExtends": "print",
	                    	"sMessage": "Generated by SmartAdmin <i>(press Esc to close)</i>"
	                	}
		             ],
		            "sSwfPath": "js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
		        },
				"autoWidth" : true,
				"preDrawCallback" : function() {
					// Initialize the responsive datatables helper once.
					if (!responsiveHelper_datatable_tabletools) {
						responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($('#datatable_tabletools'), breakpointDefinition);
					}
				},
				"rowCallback" : function(nRow) {
					responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
				},
				"drawCallback" : function(oSettings) {
					responsiveHelper_datatable_tabletools.respond();
				}
			});
			
			/* END TABLETOOLS */
		
		})

		</script>

		<script type="text/javascript">
			$(function(){
				
				var table = $('#example').DataTable({
					"pagingType":   "full_numbers",
					"sLoadingRecords": "正在加载数据...",
					"sZeroRecords": "暂无数据",
					stateSave: true,
					"searching": false,
					"dom": 'rt<"bottom"iflp<"clear">>',			
		             "aoColumnDefs": [ { "bSortable": false, "aTargets": [0] },{ "class": "tn", "targets": [ 0 ] },
		             	{
				           "targets": [ 4 ],
				           "data": "download_link",
				           "render": function ( data, type, full ) {
				             return ''+seAge(data)+'';
				           }
				         }],
					"language": {
		                 "processing": "玩命加载中...",
						"lengthMenu": "显示 _MENU_ 项结果",
						"zeroRecords": "没有匹配结果",
						"info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"infoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"infoFiltered": "(由 _MAX_ 项结果过滤)",
						"infoPostFix": "",
						"url": "",
						"paginate": {
							"first":    "首页",
							"previous": "上一页",
							"next":     "下一页",
							"last":     "末页"
						}
		           },
		           _fnPageChange:function(){
		           	alert("1111");
		           }
		            
				});
				
				//单机行，选中复选框
				$("#example tr").slice(1).each(function(g){
					var p = this;
					$(this).children().slice(1).click(function(){
						$($(p).children()[0]).children().each(function(){
							if(this.type=="checkbox"){
								if(!this.checked){
									this.checked = true;
								}else{
									this.checked = false;
								}
							}
						});
					});
				});
				
				
				//使用col插件实现表格头宽度拖拽
				$(".table").colResizable();
				
				//在搜索，或者分页的时候，调用该方法
				//这里只做具体说明，没有做实际服务端数据测试
				//重新加载表格数据（同等于刷新）
				//添加fnReloadAjax  js引用
				//参考http://www.datatables.net/plug-ins/api/fnReloadAjax
				$("#tb-refresh").on("click",function(){
					//加载一个新的文件
					//fnReloadAjax方法有3个主要参数
					//1、oSettings=[类似jquery ajax的data:{id:2}]
					//2、sNewSource=加载数据的URL
					//3、回调函数fnCallback
					//table.fnReloadAjax( 'media/examples_support/json_source2.txt' );
					//刷新新的数据
					//table.fnReloadAjax();
				});
				
			})
			
			
			
			function seAge(a){
				if(a<20){return "少年";}
				if(a>=20 && a<45){return "<span class='text-navy'><i class='fa fa-level-up'></i> 青年</span>";}
				if(a>=45){return "<span class='text-warning'><i class='fa fa-level-down'></i> 老年</span>";}
			}
			
		</script>
	</body>

</html>